import * as api from '@/services/adIpmoveConfig';
import {
    DrawerForm,
} from '@ant-design/pro-form';
import { PlusOutlined } from '@ant-design/icons';
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import {
    PageContainer,
    ProTable,
} from '@ant-design/pro-components';
import { Button, Popconfirm } from 'antd';
import React, { useRef, useState } from 'react';
import Form from './components/Form';

const AdIpmoveConfigList: React.FC = () => {
    const actionRef = useRef<ActionType>();
    const [formVisible, setFormVisible] = useState<boolean>(false);
    const [current, setCurrent] = useState<API.AdIpmoveConfig | undefined>(undefined);

    const handleFormSubmit = async (record: API.AdIpmoveConfig) => {
        let result: API.Result;
        console.log(current);
        console.log(record);
        if (current) {
            result = await api.update({
                ...current,
                ...record,
            });
        } else {
            result = await api.add({ ...record });
        }

        if (result && result.success === true) {
            setCurrent(undefined);
            setFormVisible(false);
            actionRef.current?.reload();
        }
    };

    const handleRemove = async (id: number) => {
        const result = await api.remove({ ids: id });
        if (result.success) {
            actionRef.current?.reload();
        }
    };

    let columns: ProColumns<API.AdIpmoveConfig>[] = [
        {
            title: '产品',
            dataIndex: 'productName',
            width: 120,
        },
        {
            title: '地区',
            dataIndex: 'areaFilterName',
            width: 120,
        },
        {
            title: '漂移比例',
            dataIndex: 'ipMove',
            width: 120,
        },
        {
            title: '配置',
            dataIndex: 'config',
            width: 120,
        },
    ];

    columns = columns.concat([
        {
            title: '操作',
            dataIndex: 'option',
            valueType: 'option',
            width: 140,
            render: (_, record) => {
                let cmps = [];
                cmps.push(
                    <a
                        key="edit"
                        onClick={(e) => {
                            setFormVisible(true);
                            setCurrent(record);
                        }}
                    >
                        编辑
                    </a>,
                );
                cmps.push(
                    <Popconfirm
                        key="delete"
                        title="确定要删除吗?"
                        onConfirm={async () => {
                            await handleRemove(record.id);
                        }}
                    >
                        <a>删除</a>
                    </Popconfirm>,
                );

                return cmps;
            },
        },
    ]);

    return (
        <PageContainer>
            <ProTable<API.AdIpmoveConfig>
                rowKey="id"
                actionRef={actionRef}
                columns={columns}
                search={false}
                options={{
                    fullScreen: false,
                    reload: true,
                    setting: false,
                    density: false,
                }}
                pagination={false}
                toolBarRender={() => {
                    return [
                        <Button
                            type="primary"
                            key="create"
                            onClick={() => {
                                setFormVisible(true);
                            }}
                        >
                            <PlusOutlined /> 新建
                        </Button>,
                    ];
                }}
                request={api.list}
            />
            <Form
                visible={formVisible}
                current={current}
                onSubmit={handleFormSubmit}
                onCancel={() => {
                    setFormVisible(false);
                    setCurrent(undefined);
                }}
            />
        </PageContainer>
    );
};

export default AdIpmoveConfigList;
